<template>
    <!-- 列表页面 -->
    <div class="messageEnter ">
        <el-container class="mECon">
            <el-header class="mesHead">
                <div class="mesHLe">
                    <div class="mElog">
                        <img class="mElogM" src="@/assets/images/wireai_logo.png" alt="">
                    </div>
                    <div class="mEdes">
                        <div class="mEdesA">
                            企业中心
                        </div>
                    </div>
                </div>
                <div class="mesCZ">
                    <div class="mesCZ_it" @click="closeModul">
                        <el-icon size="18">
                            <Close />
                        </el-icon>
                    </div>
                </div>
            </el-header>
            <el-main class="mEmain">
                <div class="searchBox">
                    <div class="filter">
                        <el-popover :visible="filterPop.visible" placement="bottom-start" :width="340">
                            <template #reference>
                                <div class="filterT" @click.stop="filterPop.visible = !filterPop.visible">筛选 </div>
                            </template>
                            <div class="firow">
                                <div>
                                    <el-select 
                                    :teleported="false"
                                    @click.stop
                                    v-model="pageConfig.classid" 
                                    placeholder="产品类型" 
                                    size="default"
                                        style="width: 150px;margin-right:10px">
                                        <el-option 
                                            v-for="(item,index) in menuClassList" 
                                            :key="item.id"
                                            :label="item.title" :value="item.id" />
                                    </el-select>
                                    <el-select
                                    :teleported="false"
                                    @click.stop
                                    v-model="pageConfig.status"
                                    placeholder="状态"
                                    size="default"
                                    style="width: 150px">
                                        <el-option v-for="(item,index) in statusList" :key="index"
                                        :label="item.title" :value="item.status" />
                                    </el-select>
                                </div>
                                <div class="rowitem">
                                    <div class="isOkSub" @click="searchQuery">
                                        确定
                                     </div>
                                </div>
                            </div>
                        </el-popover>

                    </div>


                    <div class="searInpu">
                        <el-input
                            v-model="pageConfig.company" 
							class="searInputs"
                            placeholder="请输入提单企业关键词"
                            :prefix-icon="Search">
                            <template #append >
                                <div @click="searchQuery">
                                    搜索
                                </div>
                            </template>
                        </el-input>
                    </div>
                </div>


                <el-table class="entable" 
                    v-loading="loading"
                    :data="messageListStore.enmessagelist"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    header-row-class-name="tabHead" 
                    @row-click="rowClick">
                    <el-table-column prop="title" min-width="180" label="询价单" align="center">
                        <template #default="scope">
                            <div class="ntext title">{{ scope.row.title }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="classname" width="150" label="产品类型" align="center">
                        <template #default="scope">
                            <div class="ntext lexing">{{ scope.row.classname }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" width="100" label="提单人" align="center">
                        <template #default="scope">
                            <div class="ntext lexing">{{ scope.row.username }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="companyname" min-width="180" label="提单企业" align="center">
                        <template #default="scope">
                            <div class="ntext lexing">{{ scope.row.companyname }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" width="150" label="状态" align="center">
                        <template #default="scope">
                            <div class="bjicons">
                                <div v-if="scope.row.status == 0" class="bjico wbj">未报价 </div>
                                <div v-if="scope.row.status == 1" class="bjico ydbj">已读未报价 </div>
                                <div v-if="scope.row.status == 2" class="bjico dsh">待审核</div>
                                <div v-if="scope.row.status == 3" class="bjico ybj">已报价</div>
                                <div v-if="scope.row.status == 4" class="bjico shbj">审核被拒</div>
                                <div v-if="scope.row.status == 5" class="bjico ybj">已报价</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addtime" width="150" label="提单时间" align="center">
                        <template #default="scope">
                            <div class="ntext">
                               
                                {{scope.row.addtime?formatTimeDifference(messageListStore.downTime,scope.row.addtime):"" }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="offertime" width="200" label="报价时间" align="center">
                        <template #default="scope">
                            <div class="ntext">
                                {{scope.row.offertime? formatTimeDifference(messageListStore.downTime,scope.row.offertime):"无"}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>



    <messageAdd v-if="isDeTail" @onCloseModule="closeDetailModul" @onfunChange="enterprisecenter" :param="isDeTail"></messageAdd>


</template>

<script setup lang='ts'>
const imgurl = import.meta.env.VITE_APP_TITLE + '/assets/images/';
import { useUserStore } from "@/store/modules/user";
import { useSystemStore } from "@/store/modules/system";
import { useMessageListStore } from "@/store/modules/messagelist";
import { ArrowDown, Close, FullScreen, Search } from '@element-plus/icons-vue'
import pdfapi from "@/api/pdf.ts"
import {formatTimeDifference,timestampToDatetime,ispdfRE,maskPhoneNumber} from "@/utils/timeFun"
const api = inject('$base', null as any);

import messageAdd from "./messageEnterpriseAdd.vue";

const baseurl = inject('$baseurl', null as any);
const useStore = useUserStore();
const base = useSystemStore();
const messageListStore =useMessageListStore();

const loading = ref<any>(false)
const isDeTail = ref<any>("");

const filterPop = reactive<any>({
    visible:false
})

//给每行一个标识
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    return 'status' + row.status
}

//打开详情页面
function rowClick(row: any, column: any, event: Event) {
    isDeTail.value = row;
}
//关闭详情页面
function closeDetailModul(){
    isDeTail.value = "";
}
//关闭当前页面
function closeModul() {
    base.isMessageType = 0;
}


const pageConfig = reactive<any>({
    userid:useStore.userIds,
    page:1,
    company:"",
    status:"",
    classid:""
})
/**
 * 获取列表详情
 */
function enterprisecenter(){
    loading.value = true;
    pdfapi.enterprisecenter(pageConfig).then((res)=>{
        console.log(res)
        messageListStore.enmessagelist = res.data.messagelist;
        messageListStore.downTime = res.data.time;
        filterPop.visible = false;
        loading.value = false; 
    })  
}
function searchQuery(){
    pageConfig.page = 1;
    enterprisecenter();
}
/**
 * 获取目录分类
 */
const menuClassList = ref<any>([])
const statusList=ref<any>([
    {
        title:"全部",
        status:""
    },
    {
        title:"未报价",
        status:0
    },
    {
        title:"已读未报价",
        status:1
    },
    {
        title:"待审核",
        status:2
    },
    {
        title:"已报价",
        status:3
    },
    {
        title:"审核被拒",
        status:4
    }
])

function getclasslist() {
	pdfapi.getclasslist({}).then((res) => {
        
		menuClassList.value = res.data;
        menuClassList.value.unshift({ id: "", title: "全部" }); 

	})
}

onMounted(() => {
    enterprisecenter();
    getclasslist();

    window.addEventListener('click', (e) => {
        e.stopPropagation();
        filterPop.visible = false;
        console.log(131313)
    });
})

</script>

<style lang="scss" scoped>
	@keyframes allsss{
		from{
			transform: scale(0);
			opacity: 0;
		}
		to{
			transform: scale(1);
			opacity: 1;
		}
	}
.messageEnter {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
	// animation: allsss 0.3s ease-in;

    .mECon {
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-sizing: border-box;
        transition: 0.2s ease;
        flex-direction: column;
        display: flex;
        position: relative;

        .mesHead {
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            border-bottom: 1px solid #dbe2ee;

            .mesHLe {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .mElog {
                    margin-right: 15px;

                    .mElogM {
                        height: 30px;
                        display: block;
                    }
                }

                .mEdes {
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    font-family: 'siyuanR';
                    position: relative;
                    padding-left: 15px;

                    &::after {
                        content: '';
                        width: 2px;
                        height: 16px;
                        background: #9094b0;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translate(0, -50%)
                    }

                    .mEdesT {
                        color: #9094b0;
                    }

                    .mEdesA {
                        color: #000;
                    }
                }
            }

            .mesCZ {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                align-content: center;

                .mesCZ_it {
                    width: 24px;
                    height: 24px;
                    margin-right: 16px;
                    margin-right: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                    cursor: pointer;

                    &:last-child {
                        margin-right: 0;
                    }

                    &:hover {
                        color: #2379f7;
                    }
                }
            }
        }

        .mEmain {
            background: #fcfcfd;
        }
    }
}

.entable {
    border: 1px solid #eee;
    box-sizing: border-box;
}

::v-deep .tabHead .el-table__cell {
    background: #f0f7fe;
    font-family: 'siyuanM';
    font-size: 14px;
    height: 48px;
    font-weight: normal;
    color: #485157;
    border-bottom:none!important;
}
::v-deep .entable .el-table__row {
    height: 56px
}
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf
{
	border-bottom: 1px solid #eee;
}

.ntext {
    // white-space: nowrap;
    // text-overflow: ellipsis;
    // overflow: hidden;
    font-family: 'siyuanR';
    font-weight: normal;
    font-size: 14px;

    &.title {
        font-family: 'siyuanM';
		text-align: left;
		
    }

}

.status0 .ntext {
    color: #010101
}
.status1 .ntext {
    color: #999
}
.status2 .ntext {
    color: #999;
	font-family: 'siyuanR'!important;
}
.status5 .ntext {
    color: #010101
}

.bjicons {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

    .bjico {
        height: 24px;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        padding: 0 14px;
        border-radius: 14px;
		font-family: 'siyuanR'!important;
        &.ydbj {
            background: #e8f1fe;
            color: #2379f7;
        }

        &.ybj {
            background: #e1fcfb;
            color: #0ac3b9;
        }

        &.wbj {
            background: #fee8ea;
            color: #fb7279;
        }
        &.dsh{
            background: #e8f7fe;
            color: #4ebbf5;
        }
        &.shbj{
            background: #feebe8;
            color:#f8674e;
        }
    }
}

.searchBox {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;

    .filter {
        margin-right: 10px;

        .filterT {
            width: 80px;
            height: 30px;
            color: #2379f7;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            cursor:pointer;
			background:#e8f1ff url('../../assets/miscel/sxan.png') no-repeat center left 15px;
			background-size: 15px 15px;
			padding-left: 15px;
			font-size: 14px;
        }
    }

    .searInpu {
		.searInputs{
			width: 320px;
		}
	}
}


::v-deep .searInpu .el-input-group__append {

    background: #6ca7fe;
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
}













.mesDet {
    width: 90%;
    max-width: 1100px;
    height: 86%;
    background: #ffffff;
    display: flex;
    background: #ffffff;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    &.fullScreen{
        width: 100%;
         height: 100%;
         max-width: 100%;
         border-radius: 0;
		overflow: hidden;
         .mesHead{
            display:flex;
         }
    }

    .mesHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        border-bottom: 1px solid #dbe2ee;
        display: none;
        .mesHLe {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .mElog {
                margin-right: 15px;

                .mElogM {
                    height: 30px;
                    display: block;
                }
            }

            .mEdes {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                font-family: 'siyuanR';
                position: relative;
                padding-left: 15px;

                &::after {
                    content: '';
                    width: 2px;
                    height: 16px;
                    background: #9094b0;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%)
                }

                .mEdesT {
                    color: #9094b0;
                }

                .mEdesA {
                    color: #000;
                }
            }

        }

       


    }

    .mesCZ {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
            position: absolute;
                top: 16px;
                right: 20px;
            .mesCZ_it {
                width: 24px;
                height: 24px;
                margin-right: 16px;
                margin-right: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                align-content: center;
                cursor: pointer;
            
                &:last-child {
                    margin-right: 0;
                }

                &:hover {
                    color: #2379f7;
                }
            }
        }
        .mesDc{
            height: 100%;
        }
    .mesMain {
        padding: 40px 40px 40px;
        display: flex;
        flex-direction: column;
        height: 100%;
        .mMt {
            padding-bottom: 14px;
            .mMt_ar {
                font-size: 20px;
                color: #2379f7;
                font-family: 'siyuanM';
                line-height: 30px;
            }

            .mMt_ot {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: 26px;

                .mMtI {
                    font-size: 13px;
                    color: #9094b0;
                    font-family: 'siyuanM';
                    margin-right: 10px;
                    margin-top: 6px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

        }

        .mMC {
            width: 100%;
            border: 1px solid #dbe2ee;
            background: #ffffff;
            padding: 30px 30px 10px;
            flex:1;
            display:flex;
            flex-direction:column;
            height: 0;
            position: relative;

            .mMCB{
                display:flex;
                align-items:baseline;
                align-content:center;
                margin-bottom:10px;
                width:100%;
                justify-content:space-between;

                .mMCBL{
                    display:flex;
                    width:100%;
                    align-items:baseline;
                    align-content:center;
                }
                .telphone{
                    
                    .telph{
                        font-size:14px;
                        color:#000000;
                        background:url('../../assets/miscel/tel.png') no-repeat left center;
                        background-size: 15px  15px;
                        padding-left: 20px;
                    }
                }



                .mUsername{
                    font-size:16px;
                    font-family:"siyuanR";
                    color:#000000;
                    margin-right:6px;
                }
                .mUserBuy{
                    .maijia{
                        font-size:12px;
                        color:#9094b0;
                        margin-right:4px;
                    }
                    .company{
                        font-size:12px;
                        color:#9094b0;
                    }
                }
                .menlist{
                    margin-left:10px;
                    .menli{
                        border:1px solid #2379f7;
                        line-height:24px;
                        padding:0 10px;
                        border:1px solid #2379f7;
                        border-radius:6px;
                        color:#2379f7
                    }
                }
                
            }
           





            .mMCH {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                border-bottom: 1px solid #dbe2ee;
                .mMCpdfs {
                    background: #f0f7fe;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 0 8px;
                    line-height: 30px;
                    box-sizing: border-box;
                    margin-right: 40px;
                    margin-bottom: 15px;
                    flex-wrap:wrap;
                    border-radius: 4px;
                    .mMCpdf {
                        font-size: 14px;
                        color: #333333;
                        white-space:nowrap;   
                    }
                    .mMCpdflx {
                        margin-left: 10px;
                        font-size: 13px;
                        color: #9094b0;
                        margin-right:20px;
                        
                        span {
                            margin-right: 6px
                        }
                    }
                }

                .mMCbts {
                    display: flex;
                    justify-content: flex-start;
                    margin-bottom: 15px;

                    .mMCdown {
                        padding: 0 20px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        background: #2379f7;
                        color: #ffffff;
                        border-radius: 6px;
                        cursor: pointer;
                        white-space: nowrap;

                        &:active {
                            opacity: 0.7
                        }
                    }

                    .mMCyx {
                        
                        padding: 0 20px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        background: #e8f1ff;
                        color: #2379f7;
                        border-radius: 6px;
                        cursor: pointer;

                        &:active {
                            opacity: 0.7
                        }
                    }
                }
            }

            .mMDetai {
                padding: 15px 0;
                box-sizing: border-box;
                width: 100%;
                min-height: 200px;
                height:100%;
              
            
                .mMDetai_html {
                        width:100%;
                         height:100%;
                         overflow: auto;
                }
              
            }
        }
    }
    

}

.rowitem{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
}
.isOkSub{
    width:100px;
    height:32px;
    background:#2379f7;
    color:#fff;
    line-height:32px;
    text-align:center;
    border-radius:6px;
    
}


.czlan{
    display:flex;
    justify-content:flex-start;
    align-content:center;
    align-items:center;
    margin-bottom:6px;
}
.czite{
    height:30px;
    padding:0 20px;
    font-size:14px;
   
    text-align:center;
    line-height:30px;
    margin-right:10px;
    border-radius:6px;
    color:#333333;
    transition:0.2s linear;
    cursor:pointer;
    &:hover{
        background:#2379f7;
        color:#ffffff;
    }
}


.PDF {
    background: url('../../assets/images/icon2.png') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}

.Word {
    background: url('../../assets/images/icon1.png') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}

.Other {
    background: url('../../assets/images/link.png') no-repeat left center;
    background-size: 16px auto;
    padding-left: 20px;
}


.fujian{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: absolute;
    left: 30px;
    bottom:30px;
    .fujianName{
        border: 1px solid #dbe2ee;
        padding: 0 10px;
        border-radius: 4px;
        background: #ffffff;
        .fujianNa{
            font-size: 14px;
            color: #000;
            line-height: 30px;
            font-size: 14px;
            position: relative;
        }
        margin-right: 6px;
    }
    .fjclose{
        width: 30px;
        height: 30px;
        background:#fff url('../../assets/miscel/close.png') no-repeat center center;
        background-size:18px 18px;
        cursor: pointer;
        &:hover{
            opacity: 0.9;
        }
    }
}
::v-deep .el-table tr{
    cursor: pointer;
}
::v-deep .el-table tr:hover td{
    background: #6ca7fe!important;
    color:#ffffff!important;
    .ntext {
        color: #ffffff!important;
    }
}
::v-deep .el-table tr td:nth-child(1){
	// border: 1px solid transparent;
}
::v-deep .el-table tr:hover td:nth-child(1)
{
    border: 1px solid #2379f7;
    box-sizing: border-box;
   
    background: #fff!important;
    .ntext {
        color: #2379ff!important;
		font-family: 'siyuanM';
    }
}

@media screen and (max-width: 768px){
	
	.messageEnter .mECon .mesHead .mesHLe .mElog .mElogM{
		height: 24px;
	}
	.searchBox .searInpu .searInputs{
		width: calc(100vw - 115px);
	}
	.mEmain{
		padding:20px 10px;
	}
}


</style>